<!--车辆状态信息-->

<template>
    <div style="display: flex; width: 100%;">
      <!--页面标题-->
      <Header :position="position"></Header>
      <div class="left">
        <el-card style="width: calc( 100% - 10px ); height:300px;">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>当前数据</span>
          </div>
          <div style="display: flex; width: 100%; text-align: left">
            <div style="width: 200px; padding: 20px; margin-left: 50px">
              <h3>在线车辆</h3>
              <h1 style="color: #b7eb8f;font-size: 110px;">{{current}}</h1>
            </div>
            <div style="width: 200px; padding: 20px">
              <h3>故障车辆</h3>
              <h1 style="color: #d0021b;font-size: 110px;">{{current}}</h1>
            </div>
            <div style="width: 200px; padding: 20px">
              <h3>离线车辆</h3>
              <h1 style="color: #00474f;font-size: 110px;">{{current}}</h1>
            </div>
            <div style="width: 340px; border-left: solid; border-color: #dcdfe6; border-width: 1px">
              <h3 style="margin-left: 30px;margin-top: 0;margin-bottom: 0 ">车型占比:</h3>
              <annual-pie style="height: 200px;margin-top: -20px"></annual-pie>
            </div>
          </div>
        </el-card>
        <el-card style="width: calc( 100% - 10px ); height: 561px; margin-top: 10px ">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>运行信息</span>
          </div>
          <line-histogram style="width: 100%;"></line-histogram>
        </el-card>
      </div>
      <div class="right">
        <el-card style="width: 100%;text-align: left">
          <div slot="header" style="font-size: 20px;font-weight: bolder;text-align: left">
            <span>详细列表</span>
          </div>
          <div style="white-space: nowrap; display: flex">
            <el-select placeholder="车种" style="margin: 5px;width:50%"></el-select>
            <el-select placeholder="车型" style="margin: 5px;width:50%"></el-select>
          </div>
          <div style="white-space: nowrap;display: flex">
            <el-select placeholder="车号" style="margin: 5px;width:50%"></el-select>
            <el-select placeholder="生产厂家" style="margin: 5px;width:50%"></el-select>
          </div>
          <div style="width: 100%;justify-content: center">
            <el-button style="border-radius: 20px; border-color: #ace0f9; width: 200px;margin-left: calc(50% - 100px); margin-top: 10px" >检索车辆</el-button>
          </div>

          <el-table :data="tableData" stripe style="margin-top: 10px;overflow-y: auto" height="573px">
            <el-table-column label="车种" prop="class">

            </el-table-column>
            <el-table-column label="车型" prop="type">

            </el-table-column>
            <el-table-column label="车号" prop="id">

            </el-table-column>
            <el-table-column label="状态" prop="status">

            </el-table-column>
            <el-table-column label="时间" prop="time">

            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 5px"></el-pagination>
        </el-card>
      </div>

    </div>
</template>

<script>
  import LineHistogram from "../../components/charts/LineHistogram";
  import AnnualPie from "../../components/charts/AnnualPie";
  import Header from "../../components/Header";
  export default {
    name: "TrainStatus",
    components:{Header, AnnualPie, LineHistogram},
    data(){
      return{
        position:{
          secondTitle:'状态信息' ,
          thirdTitle:'车辆运行信息'
        },
        current:50,
        fault:64,
        offline:73,
        tableData:[
          {
            class: '双馈',
            type: '5MW空水',
            id:'10120001',
            status:'故障',
            time:'2020.11.11',
          },{
            class: '笼型',
            type: '2.5MW鼠笼',
            id:'32121001',
            status:'正常',
            time:'2020.12.13',
          },{
            class: '永磁',
            type: '永磁直驱',
            id:'22102001',
            status:'故障',
            time:'2020.11.14',
          },{
            class: '永磁',
            type: '永磁直驱',
            id:'22102002',
            status:'离线',
            time:'2020.12.14',
          },{
            class: '永磁',
            type: '永磁直驱',
            id:'22102003',
            status:'正常',
            time:'2020.11.11',
          },{
            class: '双馈',
            type: '5MW空水冷',
            id:'10120002',
            status:'正常',
            time:'2020.11.11',
          },{
            class: '永磁',
            type: '永磁直驱',
            id:'22102004',
            status:'正常',
            time:'2020.11.11',
          },{
            class: '笼型',
            type: '2MW鼠笼',
            id:'32121002',
            status:'正常',
            time:'2020.11.11',
          },
        ],
      }
    }
  }
</script>

<style scoped>
  .left{
    width: 68%;
    height: 100%;
  }
  .right{
    width: 32%;
    height: 100%;
  }
</style>
